<template>
	<div class="content">
		<div class="lines">
			<div class="name">代表队</div>
			<div class="list">
				<div v-for="(item, index) in list" :key="index" class="list-item" @click="selectItem(index)">
					<div class="groupname">
						<input type="radio" class="radio" :value="index" v-model="selectedIndex" @click.stop />
						<div class="names">
							{{ item.name }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btnbox" @click="qiandao">
			{{ start ? "去抽签" : '已过抽签时间' }}
		</div>
		<div class="tan" v-if="messages != ''">
			<div>{{ messages }}</div>
		</div>
	</div>
</template>

<script>
import { getTeamList, signIn } from "@/api/index";

export default {
	data() {
		return {
			messages: "",
			name: "",
			start: true,
			list: [],
			selectedIndex: -1 // 初始没有选中任何项
		};
	},
	methods: {
		selectItem(index) {
			this.selectedIndex = index;
		},
		async getteam() {
			try {
				const res = await getTeamList({});
				this.list = res.data;
			} catch (error) {
				console.error("Error fetching team list:", error);
			}
		},
		isPastTime(inputTime) {
			const currentTime = new Date();
			const inputDate = new Date(inputTime);
			return inputDate < currentTime;
		},
		async qiandao() {
			if (this.selectedIndex === -1) {
				this.messages = "请选择代表队";
				return;
			}

			try {
				const res = await signIn({
					name: this.list[this.selectedIndex].name,
				});

				if (res.code === 200) {
					localStorage.setItem("select", this.list[this.selectedIndex].name);
					this.$router.push('/index');
				} else {
					this.messages = res.msg;
					setTimeout(() => {
						this.messages = "";
					}, 2000);
				}
			} catch (error) {
				console.error("Error during sign in:", error);
				this.messages = "操作失败，请重试";
				setTimeout(() => {
					this.messages = "";
				}, 2000);
			}
		}
	},
	mounted() {
		this.getteam();
	}
};
</script>

<style scoped>
.list-item {
	padding: 15px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.groupname {
	display: flex;
	align-items: center;
	width: 100%;
}

.names {
	margin-left: 10px;
	line-height: 1.5;
}

/* 调整radio样式 */
.radio {
	margin-right: 10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.list {
	margin-top: 30px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 10px;
	padding: 20px;
}

.tan {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	padding: 20px;
	width: 50%;
	color: white;
	text-align: center;
	border: solid 4px red;
	box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
}

.tishi {
	text-align: center;
	font-size: 30px;
}

.btnbox {
	width: 160px;
	display: block;
	margin: 0 auto;
	margin-top: 80px;
	position: relative;
	background: url("@/assets/images/btn2.png");
	background-size: 100% 100%;
	height: 60px;
	text-align: center;
	color: white;
	line-height: 50px;
	font-size: 20px;
}

.btns {
	width: 100%;
	height: 100%;
	display: block;
}

.name {
	color: black;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

.lines {
	padding-top: 10vh;
	width: 80%;
	margin: 0 auto;
}

.inputs {
	width: 100%;
	height: 80px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	margin-top: 20px;
	padding-left: 20px;
	outline: none;
	box-sizing: border-box;
	border-color: #409eff;
	box-shadow: 0px 0px 10px rgba(113, 0, 0, 0.9);
}

.content {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	min-height: 100vh;
	background: url("@/assets/images/bgs2.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-bottom: 50px;
}
</style>